// 响应式断点定义

$breakpoints: (
  'mobile': 768px,
  'tablet': 1024px,
  'desktop': 1200px,
  'wide': 1440px
);

// 媒体查询混入
@mixin mobile {
  @media (max-width: #{map-get($breakpoints, 'mobile') - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{map-get($breakpoints, 'mobile')}) and (max-width: #{map-get($breakpoints, 'tablet') - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{map-get($breakpoints, 'tablet')}) and (max-width: #{map-get($breakpoints, 'desktop') - 1px}) {
    @content;
  }
}

@mixin wide {
  @media (min-width: #{map-get($breakpoints, 'desktop')}) {
    @content;
  }
}

// 向上兼容断点
@mixin mobile-up {
  @media (min-width: #{map-get($breakpoints, 'mobile')}) {
    @content;
  }
}

@mixin tablet-up {
  @media (min-width: #{map-get($breakpoints, 'tablet')}) {
    @content;
  }
}

@mixin desktop-up {
  @media (min-width: #{map-get($breakpoints, 'desktop')}) {
    @content;
  }
}

// 向下兼容断点
@mixin tablet-down {
  @media (max-width: #{map-get($breakpoints, 'tablet') - 1px}) {
    @content;
  }
}

@mixin desktop-down {
  @media (max-width: #{map-get($breakpoints, 'desktop') - 1px}) {
    @content;
  }
}

@mixin wide-down {
  @media (max-width: #{map-get($breakpoints, 'wide') - 1px}) {
    @content;
  }
}
